@import 'button';
html {
	height: 100%;
}
body {
	margin: 0px;
	height: 100%;
	.background-image {
		position: absolute;
		z-index: -999;
		width: 100%;
		height: 100%;
		background-image: url(/static/src/images/timg.jpeg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;	
		top: 0px;
		left: 0px;	
	}
	#home {
		height: 100%;
		.home-container {
			display: flex;
			height: 100%;
		}
		
		#infomation {
			text-align: center;
			flex: 2;
			color: #49a9ee;
			border: 1px solid #eee;
			background-color: rgba(255, 255, 255, 0.5);
			position: relative;
			min-width: 240px;
			.infomation-container {
				position: absolute;
				top: 20%;
				.avatar-container {
					width: 50%;
					height: auto;
					margin: auto;
					img {
						width: 100%;
						height: auto;
					}
				}
				table {
					border-spacing: 0px 10px;
					margin: auto;
					text-align: center;
					width: 80%;
				}
				.infomation-edit a {
					color: #000;
					text-decoration: none;
					&:hover{
						text-decoration: underline;
						color: #49a9ee;
					}
				}
			}	
		}
		@media (max-width: 1140px) {
			#infomation {
				display: none;
			}
		}
		#main-container {
			flex: 8;
			position: relative;
			.modal-content {
				width: 500px;
				height: 150px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -250px;
				margin-top: -75px;
				border: 1px solid #eee;
				background-color: #fff;
				border-radius: 5px;
				.input {
					width: 450px;
					height: 40px;
					display: inline-block;
					border: 1px solid #fff000;
					outline: 0px;
					font-size: 20px;
					color: #000;
					position: absolute;
					top: 20%;
					left: 50%;
					margin-left: -225px;
					padding-left: 10px;
				}
				.button {
					position: absolute;
					bottom: 0;
					text-align: center;
					width: 100%;
					.btn {
						margin: 0px 5px 10px;
						width: 150px;
						height: 40px;
						border-radius: 20px;
					}
				}
			}
			.video-list-container {
				width: 80%;
				height: 90%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				background-color: rgba(255, 255, 255, .8);
				display: flex;
				min-width: 900px;
				min-height: 800px;
				.video-list-content {
					width: 95%;
					height: 95%;
					margin: auto;
					.list {
						list-style: none;
						width: 100%;
						height: 90%;
						padding: 0;
						margin: -10px 0px 0px;
						overflow-y: scroll;
						.item {
							width: 25%;
							float: left;
							.item-content {
								height: 155px;
								margin: 10px 10px 0px;
								text-align: center;
								video {
									height: 100%;
									width: 100%;
									background-color: #eee;
								}
								.img-a {
									display: inline-block;
									position: relative;
									width: 160px;
									height: 100px;
									text-decoration: none;
									font-size: 12px;
									color: #fff;
									img {
										width: 100%;
										height: 100%;
										margin: auto;
									}
									.video-time {
										background-color: rgba(0, 0, 0, .5);
										padding: 2px 8px;
										border-radius: 2px;
										position: absolute;
										bottom: 5px;
										right: 5px;
										opacity: 1;
										transition: all .5s ease;
									}
									.meta-mask {
										position: absolute;
										width: 100%;
										height: 100%;
										left: 0px;
										top: 0px;
										background-color: rgba(0, 0, 0, .5);
										opacity: 0;
										transition: all .5s ease;
										.meta-info {
											width: 80%;
											height: 80%;
											position: absolute;
											top: 0px;
											left: 0px;
											right: 0px;
											bottom: 0px;
											margin: auto;
											p {
												margin: 2px 0px;
												text-align: left;
											}
											.author {
												text-overflow: ellipsis;
												overflow: hidden;
												white-space: nowrap;
											}
										}
									}
									&:hover {
										.video-time {
											opacity: 0;
										}
										.meta-mask {
											opacity: 1;
										}
									}
								}
								.title-a {
									width: 160px;
									display: inline-block;
							    line-height: 20px;
							    height: 38px;
							    margin-top: 6px;
							    overflow: hidden;
							    font-size: 12px;
							    text-align: left;
							    text-decoration: none;
							    color: #000;
							    transition: all .5s ease;
							    &:hover {
							    	color: #00a1d6;
							    }
								}
							}
						}
					}
					.upload-container {
						height: 10%;
						text-align: center;
						button {
							margin: 0px 10px;
						}
					}
				}
					
			}
		}
		#change-info {
			.modal-container {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0px;
				top: 0px;
				z-index: 10;
				.layer {
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.3);
				}
				.close {
					position: absolute;
					right: 10px;
					top: 10px;
					text-decoration: none;
					color: #000;
					&:hover {
						color: #fff;
					}
				}
				.content {
					border: 1px solid #eee;
					padding: 20px 50px;
					position: absolute;
					left: 50%;
					top: 30%;
					transform: translateX(-50%) translateY(-50%);
					background-color: rgba(255, 255, 255, 1);
					.form {
						table {
							border-spacing: 0px 10px;
							.avatar {
								width: 100px;
								height: 100px;
							}
						}
						p {
							text-align: center;
							input {
								font-size: 20px;
								margin: 0px 10px;
							}
						}
					}
				}
			}
		}
	}
}
